<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>图鉴管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增图鉴</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form label-width="100px" :model="query" :rules="rules" ref="add">
      <el-form-item label="图片" prop="picture">
        <img-upload
          tip="建议:图片小于1M"
          v-model="query.urlList"
          :limit="1"
          listType="picture-card"
          @upload="change"
        ></img-upload>
      </el-form-item>
      <el-form-item label="uri" prop="uri">
        <el-input v-model="query.uri" style="width: 340px" disabled></el-input>
      </el-form-item>
      <el-form-item label="加成" prop="addition">
        <el-input v-model="query.addition" style="width: 240px" type="number"></el-input>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input v-model="query.weight" style="width: 240px" type="number"></el-input>
      </el-form-item>
      <el-form-item label="中文昵称" prop="name">
        <el-input v-model="query.name" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="英文昵称" prop="ename">
        <el-input v-model="query.ename" style="width: 240px"></el-input>
      </el-form-item>
      <el-form-item label="显示状态">
        <el-switch v-model="query.show"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">保存</el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>
<script>
export default {
  name: 'Add-Role',
  data () {
    return {
      query: {
        uri: '',
        urlList: [],
        show: true
      },
      rules: {
        uri: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        addition: [{ required: true, message: '加成不能为空', trigger: 'blur' }],
        weight: [{ required: true, message: '权重不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '中文昵称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    change (url) {
      console.log('更新', url)
      this.query.uri = url
    },
    add () {
      this.$refs['add'].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            addition: Number(this.query.addition),
            weight: Number(this.query.weight)
          }
          this.$axios.post('/admin/addResource', params).then((result) => {
            if (!result) {
              this.$message.success('操作成功')
              this.$router.push('/resource')
              this.$refs['add'].resetFields()
            } else {
              this.$message.error(result.data.msg)
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
